<template>
    <div>
        <hr style="border: 1px dashed darkgray;transform: scaleY(0.5);margin-bottom: 20px">
        <div v-if="active===0" style="width: 90%;margin-left: 60px">
            <el-row>
                <el-col :span="3">
                    <el-date-picker type="date" placeholder="服务时间" v-model="caseAgencySearch.collectionTime" style="width: 100%;" clearable></el-date-picker>
                </el-col>
                <el-col :span="1" :offset=1>
                    <el-button type="primary" @click="seniorSearch">检索</el-button>
                </el-col>
                <el-col :span="1" :offset=2>
                    <el-button type="info" @click="addCaseAgency">添加</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="caseAgencyData"
                    border
                    style="width: 100%;margin-top: 10px;margin-bottom: 10px">
                <el-table-column
                        align="center"
                        prop="caseNo"
                        label="案号"
                        width="149">
                    <template slot-scope="scope">
                        <a href="javascript:" @click="queryDetails(scope.row.id)">
                            {{scope.row.caseNo}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseWtr"
                        label="委托人">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="collectionTime"
                        label="服务时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseCaseTypeName"
                        label="服务类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseCause"
                        label="服务内容">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseFilenumber"
                        label="服务人次">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseAgencyfee"
                        label="服务费用">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="caseSubtime"
                        label="登记时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-dropdown trigger="click">
                            <el-button type="primary" @click="handleClick(scope.row.id)">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="upCase">修改</el-dropdown-item>
                                <el-dropdown-item @click.native="applyInvoice">申请发票</el-dropdown-item>
                                <el-dropdown-item @click.native="caseSeal">上传文书</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[1, 5, 10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <div v-if="active===1">
            <AddCaseAgency :case-id="caseId" @back="back"></AddCaseAgency>
        </div>
        <div v-if="active===2">
            <CaseDetails :case-id="caseId" @back="back"></CaseDetails>
        </div>
        <div v-if="active===3">
            <AddCaseSealApplyfor active-name="second" :id="caseId" @changeActive="back"></AddCaseSealApplyfor>
        </div>
    </div>
</template>

<script>
    import AddCaseService from "../../model/AddCaseService";
    import AddCaseAgency from "./AddCaseAgency";
    import CaseDetails from "./CaseDetails";
    import AddCaseSealApplyfor from "./AddCaseSealApplyfor";

    const addCaseService =AddCaseService.getInstance();
    export default {
        name: "CaseAgency",
        components:{
            AddCaseAgency,
            CaseDetails,
            AddCaseSealApplyfor
        },
        data(){
            return{
                active:0,//显示与隐藏
                caseAgencyData:[],//表格数据
                caseId:"",//案件id

                total:"",//数据总条数
                pageSize:5,//每页显示条数
                pageNum:1,//当前页

                caseAgencySearch:{//高级检索
                    hrEmpId:JSON.parse(localStorage["user"])[0].hrEmpId,//主办律师id
                    collectionTime:"",//服务时间
                    caseCaseTypeId:"1011",
                },
            }
        },
        created() {
            this.queryCaseAgency();
        },
        methods:{
            caseSeal(){//上传文书
                this.active=3;
            },
            addCaseAgency(){//添加
                this.caseId="";
                this.active=1;
            },
            upCase(){//修改
                this.active=1;
            },
            handleClick(id){//下拉菜单按钮点击事件
                this.caseId=id
            },
            queryDetails(id){//查看案件详情
                this.active=2;
                this.caseId=id;
            },
            back(){//添加回调
              this.active=0;
              this.queryCaseAgency();
            },
            handleCurrentChange(val){//当前页发生变化
                const page={
                    pageNum:val
                };
                this.queryCaseAgency(page);
            },
            handleSizeChange(val){//每页数据条数变化
                const page={
                    pageSize:val
                };
                this.queryCaseAgency(page);
            },
            seniorSearch(){//高级查询
                this.pageSize=5;
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.caseAgencySearch.collectionTime!==""&&this.caseAgencySearch.collectionTime!=null){
                    this.caseAgencySearch.collectionTime=this.$date.formatDate(this.caseAgencySearch.collectionTime,"yyyy-MM-DD");
                }
                addCaseService.querySenior(this.$http,this.caseAgencySearch).then(msg=>{
                    this.caseAgencyData=msg.data.data.list;
                    this.$loading().close()
                })
            },
            queryCaseAgency(params){
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                const param={
                    hrEmpId:JSON.parse(localStorage["user"])[0].hrEmpId,
                    caseCaseTypeId:"1011",
                    pageNum:params==null?this.pageNum:(params.pageNum===undefined?this.pageNum:params.pageNum),
                    pageSize:params==null?this.pageSize:(params.pageSize===undefined?this.pageSize:params.pageSize)
                };
                addCaseService.querySenior(this.$http,param).then(msg=>{
                    this.caseAgencyData=msg.data.data.list;
                    this.total=msg.data.data.total;
                    this.pageSize=msg.data.data.pageSize;
                    this.$loading().close();
                })
            },
        },
    }
</script>

<style scoped>

</style>